<template>
  <div>
    <div style="display: flex; justify-content: space-around; align-items: center">
      <span></span>
      <h3>订单列表</h3>
      <div style="width: 300px">
        <el-input placeholder="输入订单号进行搜索" v-model="inputValue">
          <el-button slot="append" icon="el-icon-search" @click="getOrderById()"></el-button>
        </el-input>
      </div>
    </div>
    <el-table class="table" :data="orderData" style="width: 100%">
      <el-table-column prop="id" label="订单编号" align="center"></el-table-column>
      <el-table-column prop="time" label="创建时间" align="center"></el-table-column>
      <el-table-column prop="state" label="订单状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state === -1">已取消</span>
          <span v-else-if="scope.row.state === 0">未制作</span>
          <span v-else-if="scope.row.state === 1">制作中</span>
          <span v-else-if="scope.row.state === 2">已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="getOrderDetail(scope.row.id)" type="text" style="margin-right: 10px">
            查看订单
          </el-button>
          <el-button @click="cancelOrder(scope.row.id)" type="text" v-if="scope.row.state === 0">
            取消订单
          </el-button>
          <el-drawer
            title="订单详情"
            :direction="'btt'"
            :visible.sync="order"
            size="60%"
            style="font-size: 15px">
            <el-row>
              <div style="display: flex; text-align: left; margin-left: 30px; width: 60%">
                <div style="width: 12em">用户名：{{ name }}</div>
                <div style="width: 12em">合计：{{ totalPrice / 100 }} 元</div>
              </div>
              <div style="display: flex; text-align: left; margin-left: 30px; width: 60%">
                <div style="width: 12em">手机号：{{ phone }}</div>
                <div style="width: 3em">备注：</div>
                <div style="width: calc(100% - 15em); text-align: left">{{ notes }}</div>
              </div>
            </el-row>
            <el-table class="table" :data="dishData" style="width: 100%">
              <el-table-column prop="photo" label="图片" align="center">
                <template slot-scope="scope">
                  <el-image :src="url + scope.row.photo"  style="width: 100px"/>
                </template>
              </el-table-column>
              <el-table-column prop="dishName" label="名称" align="center"></el-table-column>
              <el-table-column prop="price" sortable label="价格" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.price / 100}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="grade" sortable label="评分" align="center">
                <template slot-scope="scope">
                  <div class="block">
                    <el-rate
                      v-model="scope.row.grade"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}" v-if="scope.row.grade != null">
                    </el-rate>
                    <div v-if="scope.row.grade == null">暂无评分</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope" >
                  <el-button @click="getAssessData(scope.row.id)" type="text">
                    查看评论
                  </el-button>
                  <el-drawer
                    title="菜品评论"
                    :visible.sync="assess"
                    :append-to-body="true"
                    size="40%"
                    style="text-align: center; font-size: 15px">
                    <div class="block" style="text-align: left; margin-left: 20px">
                      <el-rate v-model="addAssess.grade"></el-rate>
                    </div>
                    <div style="text-align: left; margin-left: 20px; margin-top: 10px">
                      <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="addAssess.content"
                        maxlength="500"
                        style="width: 50%"
                        show-word-limit>
                      </el-input>
                      <el-button type="primary" @click="add_assess">提交评论</el-button>
                    </div>
                    <el-divider></el-divider>
                    <div v-for="i in assessData">
                      <div style="display: flex; justify-content: left">
                        <div style="width: 20%">
                          <img :src="url + i.photo" alt="" style="width: 60px; border-radius: 50%; margin-top: 10px">
                        </div>
                        <div style="width: 75%; text-align: left">
                          <h2 style="display: block">{{i.username}}</h2>
                          <p>{{i.content}}</p>
                          <div style="display: flex; justify-content: space-between">
                            <div class="block">
                              <el-rate
                                v-model="i.grade"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                              </el-rate>
                            </div>
                            <span style="margin-right: 40px">{{i.time}}</span>
                          </div>
                        </div>
                      </div>
                      <el-divider></el-divider>
                    </div>
                  </el-drawer>
                </template>
              </el-table-column>
            </el-table>
            <el-row justify="ending">
            </el-row>
          </el-drawer>
        </template>
      </el-table-column>
    </el-table>
    <el-button-group>
      <el-button type="primary" @click="firstPage">首页</el-button>
      <el-button type="primary" icon="el-icon-arrow-left" @click="beforePage">上一页</el-button>
      <el-button type="primary" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      <el-button type="primary" @click="lastPage">尾页</el-button>
    </el-button-group>
  </div>
</template>

<script>
import {add} from "nightwatch/lib/core/queue";

export default {
  name: 'CustomerOrder',
  data () {
    return {
      orderData: [],
      dishData: [],
      assessData: [],
      assess: false,
      order: false,
      inputValue: '',
      totalPrice: 0,
      notes: '',
      name: '',
      phone: '',
      addAssess: {
        content: '',
        grade: 0,
        orderId: 0,
        dishId: 0
      },
      url: this.$url,
      pIndex: 1,
      pSize: 10,
      pCount: 1
    }
  },
  mounted () {
    if (sessionStorage.getItem('phone') !== null) {
      this.getOrderData()
    }
  },
  methods: {
    getOrderData () {
      // 用户获取订单列表
      this.$request.post(
        '/order/getlist',
        {
          'pIndex': this.pIndex,
          'pSize': this.pSize
        }).then((result) => {
        if (result.code === 200) {
          this.orderData = result.data.orderList
          this.pCount = result.data.pageCount
        } else {
          this.$message.error('获取订单列表失败！');
        }
      })
    },
    firstPage() {
      if (this.pIndex <= 1) {
        this.$message.error("当前已经在首页了！")
      } else {
        this.pIndex = 1;
        this.getOrderData();
      }
    },
    beforePage() {
      if (this.pIndex <= 1) {
        this.$message.error("当前已经在首页了！")
      } else {
        this.pIndex -= 1;
        this.getOrderData();
      }
    },
    nextPage() {
      if (this.pIndex >= this.pCount) {
        this.$message.error("当前已经在末页了！");
      } else {
        this.pIndex = parseInt(this.pIndex) + 1;
        this.getOrderData();
      }
    },
    lastPage() {
      if (this.pIndex >= this.pCount) {
        this.$message.error("当前已经在末页了！");
      } else {
        this.pIndex = this.pCount;
        this.getOrderData();
      }
    },
    getOrderDetail (orderId) {
      this.addAssess.orderId = orderId
      this.order = true
      // 用户获取订单详情
      this.$request.post(
        '/order/getlist',
      {
        'orderId': orderId
      }).then((result) => {
        if (result.code === 200) {
          this.totalPrice = parseInt(result.data.orderList[0].totalPrice)
          this.notes = result.data.orderList[0].notes
          this.name = result.data.orderList[0].username
          this.phone = result.data.orderList[0].phone
        } else {
          this.$message.error('获取订单详情失败！');
        }
      })
      this.$request.post(
        '/dish/orderDetail',
        {
          'orderId': orderId
        }
      ).then(result => {
        if (result.code === 200) {
          this.dishData = result.data
        } else {
          this.$message.error('获取订单详情失败！');
        }
      })
    },
    getAssessData (dishId) {
      this.addAssess.dishId = dishId
      // 点击查看评论，获取评论列表
      this.assess = true
      this.$request.post('/assess/getlist', {
        "dishId": dishId
      }).then((result) => {
        if (result.code === 200) {
          this.assessData = result.data
        } else {
          this.$message.error('获取评论列表失败！');
        }
      })
    },
    getOrderById () {
      // 用户搜索订单
      let tmp = this.inputValue
      if (tmp === '') {
        this.getOrderData()
        return
      }
      this.$request.post(
        '/order/getlist',
        {
          'orderId': tmp
        }).then((result) => {
        if (result.code === 200) {
          this.orderData = result.data.orderList
          this.pIndex = 1
          this.pCount = 1
        } else {
          this.$message.error('没有找到该订单！');
        }
      })
      this.inputValue = ''
    },
    cancelOrder (orderId) {
      // 用户取消订单
      if (confirm('确定要取消订单？')) {
        this.$request.post(
          '/order/cancel',
          {
            'orderId': orderId
          }).then((result) => {
          if (result.code === 200 && result.data === 1) {
            this.getOrderData()
            this.$message.success('取消订单成功！');
          } else {
            this.getOrderData()
            this.$message.error('取消订单失败！');
          }
        })
      }
    },
    add_assess() {
      this.$request.post(
        '/assess/add', {
          'orderId': this.addAssess.orderId,
          'dishId': this.addAssess.dishId,
          'grade': this.addAssess.grade,
          'content': this.addAssess.content
        }).then(result => {
        if (result.code === 200 && result.data === 1) {
          this.getAssessData(this.addAssess.dishId)
          this.getOrderDetail(this.addAssess.orderId)
          this.$message.success('评论成功！');
        } else if (result.code === -1){
          this.$message.error(result.msg);
        } else {
          this.$message.error('同一个订单的同一个菜品，只能评论一次！');
        }
      })
      this.addAssess.content = ''
      this.addAssess.grade = 0
    }
  }
}
</script>

<style scoped>
.table {
  width: 90%;
  font-size: small;
}
</style>

